import React from 'react';
import { Cloud, Brain, Zap, Shield, ArrowRight } from 'lucide-react';

const Solutions = () => {
  const solutions = [
    {
      icon: <Cloud size={32} />,
      title: "云基础架构",
      description: "聚焦企业数字化转型所需的基础架构现代化服务，提供全方位支持，包括云服务器、存储、网络等资源的统一管理与调度。",
      color: "blue"
    },
    {
      icon: <Brain size={32} />,
      title: "具身智能",
      description: "构建企业级数据湖仓与智能分析平台，深度挖掘数据价值，提供智能化决策支持。",
      color: "purple",
      link: "http://embai.novemcloud.com.cn/"
    },
    {
      icon: <Zap size={32} />,
      title: "应用现代化",
      description: "基于云原生技术和微服务架构，帮助企业构建灵活、可扩展的现代化应用系统，提升应用弹性与可维护性。",
      color: "yellow"
    },
    {
      icon: <Shield size={32} />,
      title: "安全与合规",
      description: "为企业构建全面的安全管理体系和云基础架构，降低IT风险、强化安全管理、满足各类合规要求。",
      color: "green"
    }
  ];

  return (
    <section className="solutions" id="solutions">
      <div className="container">
        <div className="section-title">
          <h2>我们关注的不仅是云，更是您的业务</h2>
          <p>释放云经济价值，与"云"共盈</p>
        </div>
        
        <div className="solutions-grid">
          {solutions.map((solution, index) => (
            <div 
              key={index} 
              className={`solution-card solution-card-${solution.color} hover-lift`}
            >
              <div className="solution-icon">
                {solution.icon}
              </div>
              <h3>
                {solution.link ? (
                  <a href={solution.link} target="_blank" rel="noopener noreferrer">
                    {solution.title}
                    <ArrowRight size={16} className="solution-arrow" />
                  </a>
                ) : (
                  solution.title
                )}
              </h3>
              <p>{solution.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Solutions;
